﻿<%@ page contentType="text/html; charset=UTF-8" %>
<div class="searchBar">
角色名称：<input id="s_role_name" name="s_role_name" type="text" class="inputArea">&nbsp;&nbsp;
<input id="s_role" type="button" class="btns" value="查  询">
</div>

<table id="role_grid"></table>      
<div id="role_page"></div>  

<div id="role_dialog_add" title="新增角色">
<form id="role_form_add" name="role_form_add" style="width:376px;" class="cmxform" method="POST">
    <div id="role_add_errmsg"></div>
    <table width="100%" align="center" border="0" cellspacing="0" cellpadding="0" class="jkt-tableStyle">
      <tr>
        <td align="right" class="bluetd">角色名称：</td>
        <td align="left" class="bluetd">
  		   <input type="text" id="role_name_add" name="role_name_add"/><span class="red-color">*</span>
 		</td>
      </tr>
      
       <tr>
        <td align="right" class="bluetd">上级角色：</td>
        <td align="left" class="bluetd">
         <!--  <input id="role_name_add" name="role_name_add"/><span class="red-color">*</span>以R_开头 -->
          
     <div class="zTreeDemoBackground" style="position:relative">
  		<input type="text" id="role_higherId_add" readonly />
 		 <a id="menuBtn_role" href="#" onclick="showroleMenu_import(); return false;">选择</a><span class="red-color">*</span></div>
  		<input type="hidden" id="role_higherId_index_import" name="role_higherId_index_import" value="" />  
        </td>
      </tr>
      
      <tr>
          <td align="right" class="bluetd2">描述：</td>
          <td align="left" class="bluetd2">
            <textarea id="role_description_add" name="role_description_add" cols="21" rows="4"></textarea><span class="red-color">*</span>
          </td>
        </tr>
      <tr>
        <td colspan="2" align="center">
         <input type="button" class="btns" id="role_add_bt" value="新  增" style="margin-top:8px;" />&nbsp;&nbsp;
         <input type="button" class="btns" id="role_add_close" value="关  闭" style="margin-top:8px;" />
      </td>
</tr>
 <div id="role_import_dm" style="display:none; position:absolute;height:212px; min-width:150px; background-color:white;border:1px solid;overflow-y:auto;overflow-x:auto;">
  <ul id="role_Menu_import" class="tree"></ul></div>
</table>
</form>
</div> 

<div id="role_dialog_up" title="修改角色">
<form id="role_form_up" name="role_form_up" style="width:376px;" class="cmxform" method="POST">
    <div id="role_add_errmsg"></div>
    <table width="100%" align="center" border="0" cellspacing="0" cellpadding="0" class="jkt-tableStyle">
      <tr>
        <td align="right" class="bluetd">角色名称：</td>
        <td align="left" class="bluetd">
          <input id="role_name_up" name="role_name_up" readonly/><span class="red-color">*</span>
        </td>
      </tr>
      
      <tr>
        <td align="right" class="bluetd">上级角色：</td>
        <td align="left" class="bluetd">
         <!--  <input id="role_name_add" name="role_name_add"/><span class="red-color">*</span>以R_开头 -->
     <div class="zTreeDemoBackground" style="position:relative">
  		<input type="text" id="role_higherId_up" readonly />
 		 <a id="menuBtn_role" href="#" onclick="showroleMenu_up(); return false;">选择</a><span class="red-color">*</span></div>
  		<input type="hidden" id="role_higherId_index_up" name="role_higherId_index_up" value="" />  
        </td>
      </tr>
      
      <tr>
          <td align="right" class="bluetd2">描述：</td>
          <td align="left" class="bluetd2">
            <textarea id="role_description_up" name="role_description_up" cols="21" rows="4"></textarea><span class="red-color">*</span>
          </td>
        </tr>
      <tr>
        <td colspan="2" align="center">
         <input type="button" class="btns" id="role_up_bt" value="修  改" style="margin-top:8px;" />&nbsp;&nbsp;
         <input type="button" class="btns" id="role_up_close" value="关  闭" style="margin-top:8px;" />
      </td>
</tr>
<div id="role_import_up" style="display:none; position:absolute;height:212px; min-width:150px; background-color:white;border:1px solid;overflow-y:auto;overflow-x:auto;">
  <ul id="role_Menu_up" class="tree"></ul></div>
</table>

</form>
</div> 

<script>

    var rolevalidate,rolevalidate_add,rolevalidate_update,roleids='';//本页面变量
    var roledata={};//
	    roledata.upvalidate;
	    roledata.ids='';
	    roledata.upset;
	    roledata.importset;
	    roledata.upNodes=[];
	    roledata.importNodes=[];
    
	jQuery("#role_grid").jqGrid({//列表
        datatype: "json", 
        hidegrid: false, //不显示收缩
        url:'system/Role/list.do',
        height:rolegridHeight,
        forceFit: true,//调整宽度不改变表格宽度
        width: rolegridWidth,
        colNames:[
        '编号'
        ,'角色名称'
        ,'上级角色id'
        ,'描述'
        ,'上级角色描述'
        ],
        colModel:[
        {name:'id',index:'id', width:2,sortable:false}  
        ,{name:'name',index:'name',width:100,sortable:false}
        ,{name:'higherId',index:'higherId',width:100,sortable:false}
        ,{name:'description',index:'description',width:100,sortable:false}
        ,{name:'higherName',index:'higherName',width:100,sortable:false} 
        ],
        multiselect: true,//禁止多选
        toolbar:[true,'top'],
        rowNum:10, 
        rowList:[5,10,20], 
        viewrecords: true, 
        sortname:  "id" , //默认排序的列名    
	    sortorder: "desc", 
        pager: '#role_page', 
        jsonReader: {     
          root: 'dataRows',   
          repeatitems : false     
        }
        //caption: "角色列表" 
    })

    $("#t_role_grid").append("<div style='width:30%;' class='l'>系统管理->角色列表</div><div class='r text-r' style='width:60%; height:28px'>"
       +"<a href='javascript:void(0)' onclick=\"fun_role_update()\" class='modify r'>修改</a>"
       +"<a href='javascript:void(0)' onclick=\"fun_role_delete()\" class='del r'>删除</a> "
       +"<a href='javascript:void(0)' onclick=\"fun_role_add()\" class='add r'>新增</a></div>");//列表头
       
    $("#t_role_grid").removeClass("ui-userdata ui-state-default"); //删样式
    $("#t_role_grid").addClass("ui-title ui-corner-top ui-helper-clearfix");//加样式
    
    jQuery("#role_grid").jqGrid('hideCol',['id','higherId']);//隐藏列
    $("#role_grid").closest(".ui-jqgrid-bdiv").css({ 'overflow-x' : 'hidden' });//隐藏横向滚动条
    
	function fun_role_add(){//新增操作
		$("#role_dialog_add").dialog('option' , 'title',['新增角色']);
		$("#role_form_add")[0].reset();
		$('#role_add_errmsg').html("");
		$("#role_dialog_add").dialog("open");
		
		$.ajax({
            type: "POST",
            url:"system/Role/getTree.do",
            //url:"sys/SysCustomer/getSysCustomerTree.do",
            dataType: "json",
            success:function(json){      
                   
                 roledata.importNodes =strToObj(json.msg);                       
                 rolezreloadimportTree();
		        
            }
       })
	}
	
	$('#role_add_bt').click(function(){//点击按妞
         if(rulesByValidator(rolevalidate_add)){
              role_add_submit();
              $("#role_form_add")[0].reset();//重置表单
              rolevalidate_add.resetForm();
         }
     })
     
     function  role_add_submit(){//新增提交
            var roleJson="{'higherId':'"+$('#role_higherId_index_import').val().toUpperCase()+"','name':'"+$('#role_name_add').val().toUpperCase()+"','description':'"+$('#role_description_add').val().toUpperCase()+"'}";  
            $.ajax({
                type: "POST",
                url:"system/Role/save.do",
                data:{
                    roleJson:roleJson
                },
                dataType: "json",
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                success:function(json){
                    if(json.success){
                        $("#role_grid").trigger("reloadGrid");
                        alertmsg(json.msg,"info");
                    }else{
                        alertmsg(json.msg,"alert");
                    }
                    $("#role_dialog_add").dialog('close');
                }
           });
           //$("#role_form_add").validate.resetForm();
     }

     $('#role_add_close').click(function(){//关闭
         $("#role_dialog_add").dialog('close');
     })
     
     
     $('#role_up_bt').click(function(){//点击按妞
           role_update_submit();
     })
     
     function  role_update_submit(){//修改提交
  	    	    
            var roleJson="{'higherId':'"+$('#role_higherId_index_up').val().toUpperCase()+"','id':'"+rowData.id+"','name':'"+$('#role_name_up').val().toUpperCase()+"','description':'"+$('#role_description_up').val().toUpperCase()+"'}";  
            $.ajax({
                type: "POST",
                url:"system/Role/update.do",
                data:{
                    roleJson:roleJson
                },
                dataType: "json",
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                success:function(json){
                    if(json.success){
                        $("#role_grid").trigger("reloadGrid");
                        alertmsg(json.msg,"info");
                    }else{
                        alertmsg(json.msg,"alert");
                    }
                }
           });
     }
     
     $('#role_up_close').click(function(){//关闭
         $("#role_dialog_up").dialog('close');
     })
	
	 rolevalidate_add = $("#role_form_add").validate({//新增验证
	        errorElement: "div",
            errorPlacement: function(error, element) {
			    $('#role_add_errmsg').html("");
				error.appendTo( "#role_add_errmsg" );
			},
			success: function(label) {
			    label.text("验证通过!").removeClass("error").addClass("success");
			},
	        rules: {
	            role_name_add:{
                   required: true,
                   begin:"R_",
                   stringMaxLength:20,
                   remote: {
                       url: "system/Role/checkRoleName.do",
                       type: "post",
                       data: {
                           roleName: function() {
                               return $("#role_name_add").val().toUpperCase()
                           }
                       }
                   }
               },
               role_higherId_index_import:{
                   required: true
               },
               role_description_add:{
                   required: true,
                   stringMaxLength:500
               }
               
	        },
	        messages: {
	            role_name_add:{
                   required: "角色名称不能为空",
                   begin: "必须以R_开头",
                   stringMaxLength:"角色长度最长不能超过20位",
                   remote: "角色名称已存在"
                },
                role_higherId_index_import:{
                   required: "上级角色不能为空"
                },
                role_description_add:{
                   required: "描述不能为空",
                   stringMaxLength:"描述长度最长不能超过500位"
                }
	        },
	        onkeyup:false,
		    onsubmit:false
	});
	
	function fun_role_delete(){//删除验证
        var data = $("#role_grid").jqGrid('getGridParam','selarrrow');//'selrow'
        var length=data.length;
        if(length <1){
	        alertmsg("请至少选择一条记录再操作!","alert");
	        return;
	    }
	    roleids = '';
	    for(var i=0;i<length;i++){
	        if(i > 0){
                 roleids += ',';
            }
            roleids += data[i];
	    }
        confirm("确认要删除所选记录吗？", fun_role_del);
    }
    
    function fun_role_del(){//删除操作
	    $.ajax({
            type: "POST",
            url:"system/Role/delete.do",
            dataType: "json",
            data:{
                 ids:roleids
            },
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            success:function(json){
                 if(json.success){
                      alertmsg(json.msg,"info");
                      $("#role_grid").trigger("reloadGrid");
                 }else{
                      alertmsg(json.msg,"alert");
                 }
            }
        })
    }
    
    function fun_role_update(){//修改操作
        var id =$("#role_grid").jqGrid('getGridParam','selrow');
         var dataUpdate = $("#role_grid").jqGrid('getGridParam','selarrrow');//'selrow'     
          var lengthUpdate=dataUpdate.length;
        
          if(lengthUpdate >1){
  	        alertmsg("每次只能修改一条记录!","alert");
  	        return;
  	    }
        
        if(typeof(id) =="string"){
        $.ajax({
            type: "POST",
            url:"system/Role/getTree.do",
            //url:"sys/SysCustomer/getSysCustomerTree.do",
            dataType: "json",
            success:function(json){      
                   
                 roledata.upNodes =strToObj(json.msg);                         
                 rolezreloadimportTreeup();
            }
       })
            rowData=jQuery("#role_grid").jqGrid('getRowData',id);  
		    $("#role_form_up")[0].reset();
		    $('#role_up_errmsg').html("");
		    $("#role_dialog_up").dialog("open");
            loadRoleData();
        }else{
           alertmsg("请至少选择一条记录再操作!","alert");
        }
	}
	
	function loadRoleData(){//加载数据
	     $("#role_name_up").val(rowData.name);
	     $("#role_description_up").val(rowData.description);
	     //alert(rowData.higherId);
	     $("#role_higherId_index_up").val(rowData.higherId);
	     $("#role_higherId_up").val(rowData.higherName);
	}
	
	
	
	roledata.importset = {
		isSimpleData: true,
		treeNodeKey: "id",
		treeNodeParentKey: "pId",
		fontCss: setFontimport,
		expandSpeed : "",
		callback: {			
			click: roleimportzTreeOnClick
		}
	}
  	 
  	 
  	function setFontimport(treeId, treeNode) {
		if (treeNode && treeNode.isParent) {
			return {color: "blue"};
		} else {
			return null;
		}
	}
  	 
  	 function roleimportzTreeOnClick(event, treeId, treeNode) {
		if (treeNode) {
			var cityObj = $("#role_higherId_add");
			cityObj.attr("value", treeNode.name);
			$("#role_higherId_index_import").val(treeNode.id);
			hideroleMenu_import();
		}
	}

	function rolezreloadimportTree() {	
		hideroleMenu_import();
		$("#role_Menu_import").zTree(roledata.importset, roledata.importNodes);
	}

	function showroleMenu_import() {

	     $("#role_import_dm").css({left:"300px", top: "31px"}).slideDown("fast");
	}

	
	function hideroleMenu_import() {
		$("#role_import_dm").fadeOut("fast");
	}
	//****************************************************************************************
	roledata.upset = {
		isSimpleData: true,
		treeNodeKey: "id",
		treeNodeParentKey: "pId",
		fontCss: setFontup,
		expandSpeed : "",
		callback: {			
			click: roleupsetzTreeOnClick
		}
	}
  	 
  	 function roleupsetzTreeOnClick(event, treeId, treeNode) {
		if (treeNode) {
			var cityObj = $("#role_higherId_up");
			cityObj.attr("value", treeNode.name);
			$("#role_higherId_index_up").val(treeNode.id);
			hideroleMenu_up();
		}
	}

  	function setFontup(treeId, treeNode) {
		if (treeNode && treeNode.isParent) {
			return {color: "blue"};
		} else {
			return null;
		}
	}

	function rolezreloadimportTreeup() {	
		hideroleMenu_up();
		$("#role_Menu_up").zTree(roledata.upset, roledata.upNodes);
	}

	function showroleMenu_up() {	
	     $("#role_import_up").css({left:"300px", top: "31px"}).slideDown("fast");
	}

	
	function hideroleMenu_up() {
		$("#role_import_up").fadeOut("fast");
	}
	
	$("#role_dialog_add").dialog({//弹出层
		autoOpen: false,
		height: roleDialogHeight(),
		width: 490,
		modal: true
	})
	
	$("#role_dialog_up").dialog({//弹出层
		autoOpen: false,
		height: roleDialogHeight(),
		width: 490,
		modal: true
	})

    function roleDialogHeight(){//弹出层高度
       if($.browser.mozilla){//火狐
           return 300;
	   }else{//其它
		   return 300;
	   }
    }
    
	function fun_rolegridResize(){//设置列表度高
	    jQuery("#role_grid").setGridHeight(mDiv.height-195);
        jQuery("#role_grid").setGridWidth(mDiv.width-22);
	}
	
	$("#westDiv").bind("pageResize",function(event){//触发自己页面自适应
		 fun_rolegridResize();
	})
	
	function rolegridWidth(){//列表宽度
        mDiv.width-22; 
    }
    
    function rolegridHeight(){//列表高度
        mDiv.height-195;
    }
	
	fun_rolegridResize();//本页面自适应

	$('#s_role').click(function(){//查询
         var s_name=$('#s_role_name').val();
         $("#role_grid").setGridParam({url:'system/Role/list.do?s_name='+s_name});
         $("#role_grid").trigger("reloadGrid");
    })

</script>
